<script setup>
import { userPageApi,updateUserApi,delUserByIdApi } from "@/apis/user";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import MenuItem from "@/components/MenuItem.vue";

// 管理员分页
const userData = ref();
const userTotal = ref();

// 是否开启按钮删除和修改
const userDel = ref(true);
const userUpdate = ref(true);
const userSelect = ref();

// 修改弹窗
const userDialog = ref(false);
// 修改管理员信息
const updateUserInfo = ref()

// 用户查询字段
const userParam = ref({
  userName: "",
  address: "",
  phone: "",
  gender: "",
});

onMounted(async () => {
  userInit();
});

const userInit = async () => {
  const userRes = await userPageApi();
  userData.value = userRes.data.records;
  userTotal.value = userRes.data.total;
};

const userSearch = async () => {
  const res = await userPageApi(null, userParam.value);
  userData.value = res.data.records;
  userTotal.value = res.data.total;
};


const userChange = async (e) => {
  const res = await userPageApi({ currentPage: e }, userParam.value);
  userData.value = res.data.records;
  userTotal.value = res.data.total;
};

// 管理员勾选
const userSelectionChange = (e) => {
  userSelect.value = e;
  if (e.length > 0) {
    // 可以进行删除和修改
    userDel.value = false;
    if (e.length == 1) {
      userUpdate.value = false;
    } else {
      userUpdate.value = true;
    }
  }
  if (e.length == 0) {
    userDel.value = true;
    userUpdate.value = true;
  }
};

// 执行删除按钮
const userDelBtn = async () => {
  for (let i = 0; i < userSelect.value.length; i++) {
    const userId = userSelect.value[i].userId;
    // 调用删除接口
    const res = await delUserByIdApi({ userId: userId });
    ElMessage.success(res.msg);
  }
  userDel.value = true;
  userInit();
};

// 出现修改弹窗
const userUpdateBtn =  () => {
  userDialog.value = true;
  // 进行深拷贝不修改原来的gender
  updateUserInfo.value = JSON.parse(JSON.stringify(userSelect.value[0]));
};

// 执行修改按钮
const userUpdateConfirm = async () => {
  // 调用修改接口
  updateUserInfo.value.avatarUrl = null
  updateUserInfo.value.bgUrl = null
  userDialog.value = false;
  const res = await updateUserApi(updateUserInfo.value);
  userInit();
  ElMessage.success(res.msg);
}
</script>
<template>
<MenuItem class="pageIndex">
        <template #search>
          <div class="search-container">
            <el-input
              v-model="userParam.userName"
              style="width: 380px; height: 40px"
              placeholder="请输入用户名称"
              clearable
            />
            <el-input
              v-model="userParam.phone"
              style="width: 380px; height: 40px"
              placeholder="请输入电话号码"
              clearable
            />
            <el-input
              v-model="userParam.address"
              style="width: 380px; height: 40px"
              placeholder="请输入地址(市)"
              clearable
            />
            <el-input
              v-model="userParam.gender"
              style="width: 380px; height: 40px"
              placeholder="请输入用户性别"
              clearable
            />
            <a-button
              type="primary"
              @click="userSearch"
              style="width: 150px; height: 40px"
              >查询</a-button
            >
          </div>
        </template>
        <template #action>
          <a-button
            type="primary"
            :disabled="userDel"
            :loading="loading"
            @click="userDelBtn"
            style="margin: 0px 5px"
            >删除</a-button
          >
          <a-button
            type="primary"
            :disabled="userUpdate"
            :loading="loading"
            @click="userUpdateBtn"
            style="margin: 0px 5px"
            >修改</a-button
          >
        </template>
        <template #table>
          <el-table :data="userData" style="width: 100%; height: 100%"
            @selection-change="userSelectionChange"
          >
            <el-table-column type="selection" />
            <el-table-column property="avatarUrl" label="用户头像" width="200">
              <template #default="scope">
                <img
                  :src="scope.row.avatarUrl"
                  alt=""
                  style="width: 50px; height: 50px"
                />
              </template>
            </el-table-column>
            <el-table-column property="userName" label="用户名称" width="250" />
            <el-table-column property="phone" label="电话" width="300" />
            <el-table-column property="gender" label="性别" width="200" />
            <el-table-column property="address" label="地区" width="250" />
            <el-table-column property="createTime" label="创建时间" />
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="userTotal"
            @current-change="userChange"
          />
        </template>
      </MenuItem>
      <el-dialog v-model="userDialog" title="用户信息" width="500" draggable>
        <el-form
          label-width="auto"
          :model="updateUserInfo"
        >
          <el-form-item label="用户名称：">
            <el-input v-model="updateUserInfo.userName" />
          </el-form-item>
          <el-form-item label="用户电话：">
            <el-input v-model="updateUserInfo.phone" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="userDialog = false">取消</el-button>
            <el-button type="primary" @click="userUpdateConfirm">
              修改
            </el-button>
          </div>
        </template>
      </el-dialog>
</template>
<style scoped>

</style>
